﻿@model WebUI.Models.IndAddShotTagViewModel
@{
    ViewBag.Title = "Add Shot Tag";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>Add Shot Tag</h1>
<div class="editdes">Add proper tags to describe your work</div>
<div class="spacer"></div>

<div class="tabsbottom"></div>

<div class="mainSection atl">
    <div class="clear"></div>
    <div class="fl left">&nbsp;</div>
    <div class="fl right">
        <img src="@Model.ShotUrl" alt="@Model.Shot.Title"/>
    </div>
    <div class="clear"></div>
    <div class="spacer"></div>
    <div class="tabsbottom"></div>
    <div class="fl left">Tags</div>
    <div class="fl right">
        <div id="tags">
            @foreach (var tag in Model.ShotTagList)
            {
                <div id="tag-@tag.STagID" class="tag">
                    <span>@tag.Name</span>
                    <a class="delete-tag" title="remove this tag" href=""></a>
                </div>
            }
        </div>
        <div class="smallspacer"></div>
        <div class="clear"></div>
        @using (Html.BeginForm("AddShotTag", "Ind", FormMethod.Post, new { ID="AddShotTagForm"}))
        {
            @Html.HiddenFor(m => m.ShotID)
            <div><input type="text" name="STag.Name" /></div>
            
            <div class="right-tip">Add up to 10 tags, max 32 characters for each. e.g. "typograhpy", "annimation"</div>
            <div class="client-validation-error" id="addShotTag-error"></div>
            <div class="minispacer"></div>
            <div>
                <input class="blue-submit" type="submit" name="submitShotTag" value="Add" />&nbsp;&nbsp;
                <a class="green-submit" href="@Url.Action("Shots", new { UserName = Model.Identity.UserName})">Done or skip this step</a>
            </div>
        }
        <div class="clear"></div>
    </div>
</div>
<div class="clear"></div>

@section FooterContent
{
    <script type="text/javascript" src="@Url.StaticFile("~/content/jquery.form.js")"></script>
    <script type="text/javascript">
        $(function () {

            //add skill form
            $("#AddShotTagForm").ajaxForm({
                beforeSubmit: function (a, f, o) {
                },
                dataType: 'json',
                success: ProcessAddShotTag,
                error: function (request, status, errorThrown) {     // error during save, display error
                    //alert(request.responseText);
                    return false;
                }
            });

            $(".delete-tag").live("click", function () {
                var parentID = $(this).parent().attr("id");
                var index = parentID.indexOf("-");
                var stagID = parentID.substring(index + 1);
                $.ajax({
                    type: "POST",
                    url: "/ind/deleteShotTag",
                    data: "shotID=" + $("input[name='ShotID']").val() + "&stagID=" + stagID,
                    success: function (data) {
                        if (data.Success == 1) {
                            $("#" + parentID).remove();
                        }
                        return false;
                    },
                    error: function (request) {
                        return false;
                    }
                })
                return false;
            })
        });

        function ProcessAddShotTag(data) {
            if (data.Success == 1) {
                $("#addShotTag-error").html("");
                if (data.STagID > 0) {
                    var template =
                        '<div id="tag-{0}" class="tag">' +
                            '<span>{1}</span>' +
                            '<a class="delete-tag" title="remove this tag" href=""></a>' +
                        '</div>';
                    var html = template.replace("{0}", data.STagID).replace("{1}", data.Name);
                    $("#tags").append(html);
                }
                $("input[name='STag.Name']").val("");
            }
            else {
                $("#addShotTag-error").html(data.Message);
            }
        }

    </script>
}